<template>
  <div v-if="Object.keys(message).length !== 0">
    <headerMenu />
    <div class="container">
      <div class="imgbox">
        <img :src="message.image[radios]" alt="" />
      </div>
      <div class="textbox">
        <div class="title">
          {{ message.description }}
        </div>
        <div class="price">
          价格: <span>{{ "￥" + message.price }}</span>
        </div>
        <div class="brand">
          型号: <span>{{ message.type }}</span>
        </div>
        <div class="Rom">
          Rom: <span>{{ message.rom }}</span>
        </div>
        <div class="Ram">
          Ram: <span>{{ message.ram }}</span>
        </div>
        <div class="systom">
          系统: <span>{{ message.os }}</span>
        </div>
        <div class="weight">
          重量: <span>{{ message.weight }}</span>
        </div>
        <div class="cor">
          颜色:
          <el-radio-group v-model="radios" size="mini">
            <el-radio-button
              :label="index"
              v-for="(item, index) in message.color"
              :key="index"
              >{{ item }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div class="btn">
          <el-button type="primary" size="small" @click="addintocart"
            >加入购物车
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerMenu from "../components/Header.vue";

export default {
  props: ["id"],
  data() {
    return {
      message: {},
      radios: 0,
    };
  },
  components: {
    headerMenu,
  },
  mounted() {},
  created() {
    this.$http
      .get(
        `/v1/home/phoneDetail?id=${this.id}`
        // {
        //   params: { id: this.id },
        // }
      )
      .then((res) => {
        this.message = res.data;
        console.log(this.message);
      });
  },
  methods: {
    addintocart() {
      this.$http
        .post("/v1/home/addCart", {
          id: this.message.id[this.radios],
          brand: this.message.brand,
          type: this.message.type,
          price: this.message.price,
          color: this.message.color[this.radios],
          image: this.message.image[this.radios],
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.$message.success("已加入购物车");
            this.$store.commit("shopcart/addGoods", this.id);
          } else {
            // this.$message.warning("添加失败");
            console.log(res.data.code);
          }
        });
      //
    },
  },
};
</script>
<style  lang='less' scoped>
.container {
  display: flex;
}
.imgbox {
  margin-left: 20px;
  width: 420px;
  height: 420px;
  border: 1px solid #eee;
  text-align: center;
}
img {
  width: 380px;
  height: 380px;
}
.textbox {
  text-align: left;
  padding-left: 20px;
}
.title {
  padding-top: 30px;
  margin-bottom: 20px;
}
.price span {
  color: #e4393c;
  font-size: 20px;
}
.price {
  margin-bottom: 20px;
}
.brand {
  margin-bottom: 20px;
}
.Rom {
  margin-bottom: 20px;
}
.Ram {
  margin-bottom: 20px;
}
.systom {
  margin-bottom: 20px;
}
.weight {
  margin-bottom: 20px;
}
.cor {
  margin-bottom: 20px;
}
</style>